<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>腐腐（づ￣3￣）づ╭❤～</title>
    <style>
        *,
        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        table {
            position: relative;
            top: -10vh;
            width: 31.25rem;
            margin: 6.25rem auto;
            border-collapse: collapse;
            text-align: center;
            bottom: 10vh;
        }

        td,
        th {
            border: .0625rem solid #333;
        }

        thead tr {
            height: 2.5rem;
            background-color: #ccc;
        }

        a {
            text-decoration: none;
        }

        header {
            position: relative;
            top: 0;
            left: 20vw;
            margin-top: 2vh;
            text-align: center;
            width: 100%;
            font-weight: 700;
            line-height: 3vh;

        }

        table td {
            text-align: center;
        }

        table td span {
            font-size: 1.75rem;
            color: rgb(0, 0, 255);
        }


        table tr {
            height: 2.5rem;
            box-shadow: inset .125rem 0rem .1875rem 0rem rgba(0, 0, 255, .5), .125rem 0rem .1875rem 0rem rgba(0, 0, 255, .5);
        }

        table tr th:nth-child(1),
        table tr td:nth-child(1) {
            width: 2.5rem;
        }

        table tr th:nth-child(2),
        table tr td:nth-child(2) {
            width: 3rem;
        }

        table tr th:nth-child(3),
        table tr td:nth-child(3) {
            width: 3rem;
        }

        table tr th:nth-child(4),
        table tr td:nth-child(4) {
            width: 2.5rem;
        }

        table tr th:nth-child(5),
        table tr td:nth-child(5) {
            width: 6rem;
        }

        table tr td:nth-child(4) {
            color: red;
        }

        table tr td:nth-child(5) span {
            color: #000;
            font-size: 1rem;
            display: none;
        }

        table tr td:nth-child(5) a {
            color: blue;
        }

        .bingo {
            color: rgb(0, 255, 0);
        }

        .wrong {
            color: rgb(255, 0, 0);
        }

        .btn {
            position: fixed;
            top: 110vh;
            width: 100%;
            padding-left: 1.25rem;
            padding-right: 1.25rem;
        }

        .btn button {
            width: 3rem;
            height: 3rem;
            border: .125rem solid #2a2a2a;
            border-radius: 50%;
            font-size: 20px;
        }

        .add {
            float: left;
        }

        .mua {
            margin-left: 50%;
            transform: translateX(-110%);
            color: red;
            font-size: 28px !important;
        }

        .dlete {
            float: right;
        }

        .block {
            height: 25rem;
            opacity: 0;
        }

        .text {
            border: none;
            text-align: center;
        }
    </style>
</head>

<body>
    <header class="operation">
        版权所有&copy:·.
    </header>
    <div class="box">
        <table class="word">
            <tr>
                <th>序号</th>
                <th>单词</th>
                <th>中文</th>
                <th>操作</th>
                <th>答案</th>
                <th></th>
            </tr>
        </table>
    </div>

    <div class="block"></div>

    <div class="btn">
        <button class="add">添加</button>
        <button class="mua">❤</button>
        <button class="dlete">删除</button>
    </div>



    <!-- <script src="./一年级起点-上.js"></script> -->

    <script>
        var words = [
            'book 书、预订',
            'ruler 尺子、统治者',
            'pencil 铅笔',
            'schoolbag 书包',
            'teacher 老师',
            'I 我',
            'have 有、吃、得到',
            'a 一(个)',
            'an 一(个)',
            'face 脸、面对',
            'ear 耳朵',
            'eye 眼睛、注视',
            'nose 鼻子',
            'mouth 口',
            'this 这个',
            'is 是',
            'my 我的',
            'dog 狗',
            'bird 鸟',
            'tiger 老虎',
            'monkey 猴子',
            'cat 猫',
            'what 什么',
            'it 它',
            'one 一',
            'two 二',
            'three 三',
            'four 四',
            'five 五',
            'six 六',
            'seven 七',
            'eight 八',
            'nine 九',
            'ten 十',
            'how 如何、多么',
            'many 许多的',
            'are 是(复数)',
            'there 在那里',
            'black 黑色',
            'yellow 黄色',
            'blue 蓝色',
            'red 红色',
            'green 绿色',
            'color(colour) 颜色',
            'apple 苹果',
            'pear 梨',
            'banana 香蕉',
            'orange 橙子、橙色',
            'do 做',
            'you 你、你们',
            'like 喜欢',
            'yes 是',
            'no 没有、不是',
        ]

        // var words = ['fuck 靠','what 什么','a 一']

        var word = document.querySelector('.word')
        var box = document.querySelector('.box')
        var array = words
        var idNum = 1;

        // 随机生成单词标签
        // 避免重复(//加不行,我不能减吗)
        function getWord() {
            var num = Math.floor(Math.random() * words.length)

            var arr = array.splice(num, 1).join().split(' ');
            console.log(arr);
            return arr

        }

        // 绑定事件
        var add = document.querySelector('.add')
        var mua = document.querySelector('.mua')
        var dlete = document.querySelector('.dlete')

        mua.addEventListener('click', function () {
            alert('叶子加油,腐腐加油\n（づ￣3￣）づ╭❤～')
        })


        add.addEventListener('click', function () {
            var tr = document.createElement('tr')
            word.append(tr)
            var td_0 = document.createElement('td')
            var td_1 = document.createElement('td')
            var td_2 = document.createElement('td')

            var td_3 = document.createElement('td')
            var del = document.createElement('a')
            var td_4 = document.createElement('td')
            var anwser_span = document.createElement('span')
            var anwser = document.createElement('a')
            anwser.innerHTML = '查看'

            var td_5 = document.createElement('td')
            var cb_span = document.createElement('span')
            cb_span.innerHTML = '○'

            //给标签绑定判断是否掌握功能
            td_5.flag = true;
            td_5.addEventListener('touchend', function () {
                console.log(this.parentElement.className);

                if (td_5.flag) {
                    td_5.flag = false;
                    cb_span.innerHTML = '√'
                    cb_span.className = 'bingo'
                } else {
                    console.log('X');
                    td_5.flag = true;
                    cb_span.innerHTML = '×'
                    cb_span.className = 'wrong'
                }
            })

            //查看答案
            anwser.addEventListener('touchend', function () {
                console.log(this.parentElement.firstChild);
                this.parentElement.firstChild.style.display = 'block'
                this.style.display = 'none'
            })

            // 判断有没有新单词
            var newWord = getWord()
            var flag = newWord.length - 1;
            if (!flag) {
                return
            }

            //给标签绑定删除功能
            del.addEventListener('touchend', function () {

                // 拿到删除的对象的序列号
                var trs = document.querySelectorAll('tr')
                for (var i = this.parentElement.parentElement.firstChild.innerHTML; i < trs.length; i++) {
                    trs[i].firstChild.innerHTML = trs[i].firstChild.innerHTML - 1
                }

                word.removeChild(this.parentElement.parentElement)
                idNum--;
            })




            td_0.innerHTML = idNum++;
            var td_num = Math.round(Math.random())
            if (td_num == 1) {
                td_1.innerHTML = newWord[0]
                td_2.innerHTML = '<input type="text" class="text">'
                anwser_span.innerHTML = newWord[1]
            } else {
                td_1.innerHTML = '<input type="text" class="text">'
                td_2.innerHTML = newWord[1]
                anwser_span.innerHTML = newWord[0]
            }
            del.innerHTML = '删除'
            td_3.append(del)
            td_4.append(anwser_span, anwser)
            td_5.append(cb_span)

            tr.append(td_0, td_1, td_2, td_3, td_4, td_5)
        })

        dlete.addEventListener('click', function () {
            word.removeChild(word.children[word.children.length - 1])
            idNum--;
        })
    </script>
</body>

</html>